<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
    <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
        .layui-form-label {width: 80px !important;}
        .submit-div-btn {text-align: center;}
        .blog-user-person-information {width: 38%; height: auto; float: left;}
    </style>
</head>
<body>
<div class="layuimini-container blog-user-person-information">
    <div class="layuimini-main">
        <div class="layui-form-item">
            <h2 style="text-align: left;">个人资料</h2>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <div class="layui-inline" style="margin: 20px auto;text-align: center;display: block;">
                <img src="/file/headImg/default.png" class="layui-circle" style="width: 100px;height: 100px;">
            </div>
            <div class="layui-inline" style="margin: 20px auto;text-align: center;display: block;">
                <a href="javascript:changeHeadImg()" style="color:#337ab7;">修改头像</a>
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.username} == null ? 'user001' : ${session.user.username}">user001</div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">密码:</label>-->
<!--            <div class="layui-form-mid layui-word-aux" th:text="${session.user.password} == null ? '123456' : ${session.user.password}">123456</div>-->
<!--        </div>-->
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.email} == null ? 'blog@qq.com' : ${session.user.email}">blog@qq.com</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">个人描述:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.description} == null ? '这个人很懒' : ${session.user.description}">这个人很懒</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">电话:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.phone} == null ? '188888888888' : ${session.user.phone}">188888888888</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">地址:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.address} == null ? '地球' : ${session.user.address}">地球</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">性别:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.user.sex} == 1 ? '男' : '女'">未知</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">性别:</label>
            <div class="layui-form-mid layui-word-aux" th:text="${session.joinTime}">1999-12-14</div>
        </div>
    </div>
</div>
<div class="layuimini-container" style="width: 60%; float: right;">
    <div class="layuimini-main">

        <div class="layui-form-item">
            <h2 style="text-align: center;">基本信息</h2>
        </div>

        <div class="layui-form layuimini-form">
            <!--右边修改信息-->
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">个人信息</li>
                    <li>修改密码</li>
                    <li>邮箱绑定</li>
                    <li>更换头像</li>
<!--                    <li>修改年龄</li>-->
                </ul>
                <div class="layui-tab-content" style="">
                    <!--修改个人信息1-->
                    <div class="layui-tab-item layui-show">
                        <div th:replace="admin/user/public/editPersonInformation1"></div>
                    </div>
                    <!--修改密码2-->
                    <div class="layui-tab-item">
                        <div th:replace="admin/user/public/editPersonInformation2"></div>
                    </div>
                    <!--修改邮箱3-->
                    <div class="layui-tab-item">
                        <div th:replace="admin/user/public/editPersonInformation3"></div>
                    </div>
                    <!--更换头像-->
                    <div class="layui-tab-item">
                        <div th:replace="admin/user/public/editPersonInformation4"></div>
                    </div>
                    <!--修改年龄和身高-->
<!--                    <div class="layui-tab-item">-->
<!--                        <div th:replace="home/user/public/editPersonInformation5.html"></div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script src="/editor/js/jquery.min.js"></script>
<script src="/common/layuimini/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    function changeHeadImg(){
        top.layer.open({
            type: 2,
            title: '修改头像',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: [$(window).width() + 'px', $(window).height() + 'px'],
            move: false,
            content: '/user/admin/changeAvatar'
        });
    }
    layui.use(['form','miniTab','slider'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var miniTab = layui.miniTab;
        var $ = layui.jquery;
        var slider = layui.slider;
        var upload = layui.upload;
        var element = layui.element;
        //给用户单选框加上状态
        showUserSex();

        function showUserSex(){
            var userSex = $("#userSex").val();
            if (userSex == 1){
                $("input[name='sex'][value='1']").attr("checked","");
                form.render();
            }else {
                $("input[name='sex'][value='0']").attr("checked","");
                form.render();
            }
        }


        //打开地址选择框
        $("#address").click(function (){
            layer.open({
                type: 2,
                // offset: ['30%', '320px'],
                title: '请选择地址',
                shadeClose: true,
                shade: false,
                anim: 2,
                move:false,
                maxmin: true, //开启最大化最小化按钮
                area: ['350px;', '500px'],
                content: '/admin/user/address',
            });

        })
        //监听修改个人信息
        form.on('submit(savePeopleBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            },function (){
                $.ajax({
                    type: "post",
                    data: {
                        "userId" : data.field.id,
                        "username" : data.field.username,
                        "description" : data.field.description,
                        "address" : data.field.address,
                        "userSex" : data.field.userSex
                    },
                    url: "/user/updatePerson/Information",
                    success: function (res){
                        if (res.state == true){
                            layer.msg('保存成功',{icon: 1,time:1000},function (){
                                window.location.reload();
                            });
                        }else if (res.state == false){
                            layer.msg(res.msg);
                        }
                    }
                })
            })
            return false;
        });

        //监听提交修改密码
        form.on('submit(updatePassword)', function (data) {

            if (data.field.newPassword.length < 6){
                layer.msg('密码长度小于6位')
            }else if (data.field.newPassword != data.field.newPasswordCheck){
                layer.msg('两次密码不一致',{time: 800});
            }else {
                var index = layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                }, function () {
                    $.ajax({
                        type: "post",
                        data: {
                            "userid" : data.field.userId,
                            "oldPassword" : data.field.oldPassword,
                            "newPassword" : data.field.newPassword,
                            "newPasswordCheck" : data.field.newPasswordCheck,
                        },
                        url: "/user/updatePerson/updatePersonPassword",
                        success: function (res){
                            if (res.state == false){
                                layer.msg(res.msg);
                            }else if (res.state==true){
                                layer.msg('修改成功',function (){
                                    top.window.location.href = "/login";
                                });
                            }
                        }

                    })
                });
            }
        });

//常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

    });
</script>
</body>
</html>
